<template>
  <div v-loading.fullscreen.lock="fullscreenLoading">
    <el-table :data="tableData" height="600" style="width: 100%">
      <el-table-column type="index" width="30"> </el-table-column>
      <el-table-column label="运单编号">
        <el-table-column label="客户名称">
          <template slot-scope="scope">
            <el-row> {{ scope.row.waybillNo }}</el-row>
            <el-row v-if="scope.row.customerId">
              {{ customerMap[scope.row.customerId] }}</el-row
            >
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="放行时间" width="160">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.releaseTime"
            type="date"
            placeholder="选择日期"
            :style="{ width: '100%' }"
            :picker-options="pickerOptions"
          >
            >
          </el-date-picker>
        </template>
      </el-table-column>

      <el-table-column label="中文品名">
        <el-table-column label="DESCRIPTION" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-row
              ><el-input
                size="small"
                v-model="scope.row.declareCn"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
            <el-row
              ><el-input
                size="small"
                v-model="scope.row.description"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="货描">
        <el-table-column label="材质" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-row
              ><el-input
                size="small"
                v-model="scope.row.describe"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
            <el-row
              ><el-input
                size="small"
                v-model="scope.row.material"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="HSCODE" :show-overflow-tooltip="true">
        <el-table-column label="ASIN NO">
          <template slot-scope="scope">
            <el-row
              ><el-input
                size="small"
                v-model="scope.row.hsCode"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
            <el-row
              ><el-input
                size="small"
                v-model="scope.row.asinNo"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="数量">
        <el-table-column label="销售价格">
          <template slot-scope="scope">
            <el-row>
              <el-input
                size="small"
                v-model="scope.row.count"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
            <el-row
              ><el-input
                size="small"
                v-model="scope.row.salePrice"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="手续费(单价)">
        <el-table-column label="手续费(合计)"
          ><template slot-scope="scope">
            <el-row
              ><el-input
                size="small"
                v-model="scope.row.charge"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
            <el-row
              ><el-input
                size="small"
                v-model="scope.row.totalCharge"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="运输管理费报关费进口代理手续费">
        <template slot-scope="scope">
          <el-input
            size="small"
            v-model="scope.row.carryCharge"
            placeholder="请输入内容"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="FBA配送费(单价)">
        <el-table-column label="FBA配送费(合计)">
          <template slot-scope="scope">
            <el-row
              ><el-input
                size="small"
                v-model="scope.row.fbaShippingFee"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
            <el-row>
              <el-input
                size="small"
                v-model="scope.row.totalFbaShippingFee"
                placeholder="请输入内容"
              ></el-input> </el-row></template
        ></el-table-column>
      </el-table-column>
      <el-table-column label="经费扣除后">
        <template slot-scope="scope">
          <el-input
            size="small"
            v-model="scope.row.expenditure"
            placeholder="请输入内容"
          ></el-input> </template
      ></el-table-column>

      <el-table-column label="消费税10%">
        <el-table-column label="经费扣除后">
          <template slot-scope="scope">
            <el-row>
              <el-input
                size="small"
                v-model="scope.row.consumptionTax"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
            <el-row>
              <el-input
                size="small"
                v-model="scope.row.consumptionDeduct"
                placeholder="请输入内容"
              ></el-input
            ></el-row> </template
        ></el-table-column>
      </el-table-column>
      <el-table-column label="税率">
        <el-table-column label="关税额">
          <template slot-scope="scope">
            <el-row
              ><el-input
                size="small"
                v-model="scope.row.taxRate"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
            <el-row
              ><el-input
                size="small"
                v-model="scope.row.tariffTax"
                placeholder="请输入内容"
              ></el-input> </el-row></template
        ></el-table-column>
      </el-table-column>
      <el-table-column label="申报金额">
        <template slot-scope="scope">
          <el-input
            size="small"
            v-model="scope.row.declarePrice"
            placeholder="请输入内容"
          ></el-input> </template
      ></el-table-column>
      <el-table-column label="总申报金额"
        ><template slot-scope="scope">
          <el-input
            size="small"
            v-model="scope.row.totalDeclarePrice"
            placeholder="请输入内容"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="应付税金">
        <template slot-scope="scope">
          <el-input
            size="small"
            v-model="scope.row.payTax"
            placeholder="请输入内容"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="税金比例">
        <el-table-column label="申报比例">
          <template slot-scope="scope">
            <el-row>
              <el-input
                size="small"
                v-model="scope.row.taxRatio"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
            <el-row>
              <el-input
                size="small"
                v-model="scope.row.declareRatio"
                placeholder="请输入内容"
              ></el-input
            ></el-row> </template
        ></el-table-column>
      </el-table-column>

      <el-table-column label="关税扣除后">
        <el-table-column label="税前价格">
          <template slot-scope="scope">
            <el-row
              ><el-input
                size="small"
                v-model="scope.row.tariffDeduct"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
            <el-row
              ><el-input
                size="small"
                v-model="scope.row.beforeTax"
                placeholder="请输入内容"
              ></el-input
            ></el-row>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-button
      type="primary"
      plain
      style="margin-top:50px;"
      @click="resetEditSave"
      >保存</el-button
    >
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";

export default {
  props: ["row", "data", "more"],
  data() {
    return {
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },

      fullscreenLoading: false,
      customerMap: {},
      airPortMap: {},
      tableData: [],
      showDialogVisible: false,
      systemReamrk: "",
      JapanSplitTax: {}
    };
  },

  methods: {
    resetEditSave() {
      this.JapanSplitTax.subTaxs = this.tableData;
      ajax("resetEditSave", this.JapanSplitTax).then(
        res => {
          if (res.code === 200) {
            this.$message.success("保存成功");
            console.log("保存成功");
            setTimeout(() => {
              window.location.reload(true);
            }, 3000);
          }
        },
        error => {
          console.log(error);
          this.$message.error("保存失败");
        }
      );
    }
  },
  mounted() {
    const data = this.$store.state.edit.row;
    this.tableData = data.subTaxs;
    this.JapanSplitTax = data;
  }
};
</script>

<style>
.top {
  text-align: center;
}
</style>
